<template>
  <view class="container-classify">
    <navbar :config="config" backColor="#fff"></navbar>
    <view class="main">
      <view class="input-text">
        <view class="label">分类名称：</view>
        <u-input v-model="classify_name" height="120" maxlength='10' placeholder="请输入10个字符以内的分类名称" />
      </view>
    </view>
    <view class="footer">
      <view class="btn" @click="submit">{{id ? '确认编辑' : '确认添加'}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          back: true,
          title: '新增分类',
          color: '#fff',
          backgroundColor: [1, "#FF721B"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        id: '',
        classify_name: ''
      }
    },
    onLoad(options) {
      if (options && options.id && options.label) {
        this.id = options.id
        this.classify_name = options.label
      }
    },
    methods: {
      submit() {
        if (!this.classify_name) {
          return this.$mUtil.toast('请输入分类名称')
        }
        if (this.id) {
          this.$http.put('/offlinetype/goods/update', {
            id: this.id,
            name: this.classify_name
          }).then(res => {
            if (res.code == 200) {
              this.$mUtil.toast('编辑成功')
              setTimeout(() => {
                uni.navigateBack()
              }, 1000)
            }
          })
        } else {
          this.$http.post('/offlinetype/goods/save', {
            name: this.classify_name
          }).then(res => {
            if (res.code == 200) {
              this.$mUtil.toast('添加成功')
              setTimeout(() => {
                uni.navigateBack()
              }, 1000)
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container-classify {
    .main {
      padding: 0 60rpx;
    }

    .input-text {
      display: flex;
      align-items: center;
      height: 120rpx;
      border-bottom: 1rpx solid #f1f1f1;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #333333;

      .label {
        margin-right: 12rpx;
      }
    }

    .footer {
      width: 100%;
      padding: 30rpx 60rpx;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;

      .btn {
        width: 100%;
        color: #fff;
        text-align: center;
        line-height: 85rpx;
        border: 1rpx solid #FF721B;
        border-radius: 44rpx;
        background-color: #FF721B;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
      }

      .online-btn {
        color: #FF721B;
        border: 1rpx solid #FF721B;
        background-color: #e7eefc;
      }
    }
  }
</style>
